<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title>首页</title>
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<link rel="stylesheet" type="text/css" href="css/index.css" />
	</head>

	<body>

		<div id="fatch">
			<div class="son">
				<img src="img/kaung.png" />
			</div>
			<div class="son1">
				<img src="img/zi.png" />
			</div>
			<div class="son2">
				<img src="img/yul.png" />
			</div>
			<div class="son3">
				<img src="img/1.png" />
			</div>
			<div class="pand">
				<img src="img/2.png" />
			</div>
			<div class="mony">
				<img src="img/3.png" />
			</div>
			<div class="bottom">
				<p class="top">猴年送你n重好礼, 现金红包等你拿！</p>
				<p class="bootom">快来参与领取吧！</p>
			</div>
			<div class="di">
				<div class="Left">游戏规则</div>
				<div class="Right">参与游戏</div>
			</div>
			<div class="father">
				<div class="red">
					<div class="ziz">
						温馨提示
					</div>
					<div class="ma">
						<img src="img/ma.png" />
					</div>
					<p class="frist">开始游戏之前，请长按图中二维码关注</p>
					<p>SINOMAX赛诺微信公众平台。关注成功后，</p>
					<p>请点击公众号菜单栏进入游戏。</p>
					<div class="close">
						关闭
					</div>
				</div>
			</div>
			<div class="tou">
				<div class="red">
					<div class="ziz">
						产品特点
					</div>
					<div class="zhent">
						<img src="img/tou.png" />
					</div>
					<div class="jies">
						<span>[安琪儿枕]</span> <br /> 优质赛诺太空棉，慢回弹特质，舒缓肩颈压力。人体工学的枕面设计，紧密贴合头颈曲线，维护颈椎健康。精美安琪儿刺绣，代表快乐、灵气和可爱。
						<p>安琪儿是个魔法小天使，那安琪儿枕会飞得更远吗？</p>
					</div>
					<div class="close">
						关闭
					</div>
				</div>
			</div>
			<div class="guiz">
				<img src="img/index/game_rules_detail.png"/>
				<div class="cha">
					<img src="img/index/close_rules_btn.png"/>
				</div>
			</div>
			<div class="began">

			</div>
			<div id="game">
				<div class="bg">
					<div class="bg1">
						<img src="img/game/begin_paodao_bg.png" />
						<div class="xingxing">
							<img src="img/game/paodao_bg2.png" />
							<img src="img/game/paodao_bg1.png" />
						</div>
					</div>
					<div class="bg2">
						<img src="img/game/pao1.png" />
						<div class="xingxing">
							<img src="img/game/paodao_bg2.png" />
							<img src="img/game/paodao_bg1.png" />
						</div>
					</div>
					<div class="bg2">
						<img src="img/game/pao2.png" />
						<div class="xingxing">
							<img src="img/game/paodao_bg2.png" />
							<img src="img/game/paodao_bg1.png" />
						</div>
					</div>
					<div class="bg2">
						<img src="img/game/pao3.png" />
						<div class="xingxing">
							<img src="img/game/xingxing_bg.png" />
							<img src="img/game/paodao_bg2.png" />
						</div>
					</div>
					<div class="bg2">
						<img src="img/game/pao4.png" />
						<div class="xingxing">
							<img src="img/game/xingxing_bg.png" />
							<img src="img/game/paodao_bg2.png" />
						</div>
					</div>
					<div class="bg2">
						<img src="img/game/pao5.png" />
						<div class="xingxing">
							<img src="img/game/paodao_bg2.png" />
							<img src="img/game/paodao_bg1.png" />
						</div>
					</div>
				</div>

				<div class="some" style="top:59%;">
					<img src="img/game/zhentou_bg.png" />
					<div class="zhengtou">
						<img src="img/game/zhentou1.png" />
					</div>
				</div>
				<div class="power">
					<img src="img/game/power_wrap.png" />
					<div class="power2">
						<img src="img/game/power.png" />
					</div>
					<div class="zhe" style="left: 0px;">

					</div>
				</div>
				<div class="dian">
					<img src="img/game/tips1.png" />
				</div>
				<div class="dianji">
					<img src="img/game/tips3.png" />
				</div>

			</div>
			<div class="jieguo">
				<div class="chuan">
					<div class="tubiao">
						<img src="img/new1.png" />
					</div>
					<div class="shuzi">
						<span>37322</span>
						<span>37322</span>
					</div>
					<p>恭喜您抛出了37322光年，击败了83%的玩家！ 并获得一次抽奖机会！</p>
					<div class="bottom">
						<div class="again">
							再玩一次
						</div>
						<div class="zhoujian">
							参与抽奖
						</div>
					</div>
				</div>
			</div>

		</div>

		<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
		<script type="text/javascript">
			document.body.style.height = window.innerHeight + "px";
			/*动态改变根元素字体大小*/
			function recalc() {
				var clientWidth = document.documentElement.clientWidth;
				if(!clientWidth) return;
				document.documentElement.style.fontSize = 40 * (clientWidth / 750) + 'px';
			}
			//字体大小 = 1rem单表示了多少个像素*设备的宽度

			function initRecalc() {
				recalc();
				var resizeEvt = 'osrientationchange' in window ? 'orientationchange' : 'resize';
				if(!document.addEventListener) return;
				window.addEventListener(resizeEvt, recalc, false);
				document.addEventListener('DOMContentLoaded', recalc, false);
			}
			initRecalc();

			var Close = document.getElementsByClassName("close")[1];
			var tou = document.getElementsByClassName("tou")[0];
			var Di = document.getElementsByClassName("di")[0];
			var Left = Di.getElementsByClassName("Left")[0];
			var Right = Di.getElementsByClassName("Right")[0];
			var Game = document.getElementById("game");
			var Some = Game.getElementsByClassName("some")[0];
			var Son = document.getElementsByClassName("son")[0];
			var Bg = document.getElementsByClassName("bg")[0];
			var bg = document.getElementsByClassName("bg1")[0];
			var t;
			var Power = document.getElementsByClassName("power")[0];
			var Power2 = Power.getElementsByClassName("power2")[0];
			var zhe = document.getElementsByClassName("zhe")[0];
			var dian = document.getElementsByClassName("dian")[0];
			var dianji = document.getElementsByClassName("dianji")[0];
			var agi = document.getElementsByClassName("again")[0];
			var chou = document.getElementsByClassName("zhoujian")[0];
			var jieguo = document.getElementsByClassName("jieguo")[0];
			var ze =document.getElementsByClassName("guiz")[0];
			var cha =document.getElementsByClassName("cha")[0];
			Close.addEventListener("touchstart", function() {
				tou.style.display = "none";
			})

			Left.addEventListener("touchstart", function() {
				ze.style.display = "block";
			})
			Right.addEventListener("touchstart", function() {
				Game.style.display = "block";
			})
			Game.addEventListener("touchmove", function() {
				Some.style.top += 20 + "%";
			})
			//点击往上
			function up() {
				var o = setInterval(function() {
					if(parseInt(Some.style.top) > 7) {
						Some.style.top = (parseInt(Some.style.top) -2) + "%";
					} else {
						clearInterval(o)
					}
				}, 120)
			}

			var start = 65;
			//点击往上走一点
			function Dian() {
				Game.addEventListener("touchstart", function() {

					if(parseInt(Some.style.top) <= 7) {
						console.log(Some.style.top)

					} else {
						if(parseInt(zhe.style.left) <= 0) {
							return;
						}
						if(parseInt(Some.style.top) == 60) {
							return;
						}
						Some.style.top = (parseInt(Some.style.top) - 10) + "%";
					}
					BDD();
					jian();
					dong();

				})
			}

			//让公仔自动下降
			function BDD() {
				if(t) {
					clearInterval(t);
				}
				top2 = parseInt(Some.style.top);

				//				console.log(top2)
				t = setInterval(function() {
					Some.style.top = parseInt(top2 += .8) + "%";
					if(parseFloat(Some.style.top) >= 60) {
						clearInterval(t);
					}
				}, 25);
				return top;
			}
			var d;
			//后面背景图自动
			function dong() {
				if(d) {
					clearInterval(d);
				}
				d = setInterval(function() {

					console.log(11)
					var Left = Bg.offsetLeft;
					var This = bg.offsetWidth;
					Bg.style.marginLeft = (Left - 4) + "px";
					if(Bg.style.marginLeft == (-5 * (This)) + "px") {
						Bg.style.marginLeft = 0 + "px";
					}
					if(Some.style.top == 60 + "%") {
						clearInterval(d);
						jieguo.style.display="block";
					}

				}, 25)
			}

			//power的减加
			function pow() {
				var e;
				e = setInterval(function() {
					if(parseInt(zhe.style.left) >= 0) {
						zhe.style.left = parseInt(zhe.style.left) + 10 + "px";

					}
					if(parseInt(zhe.style.left) >= Power.offsetWidth) {
						clearInterval(e);
					}
				}, 100)
				up();
			}

			function jian() {
				if(parseInt(zhe.style.left) <= 0) {
					return;
				}
				zhe.style.left = parseInt(zhe.style.left) - 15 + "px";
			}
			//点击第一次，隐藏然后显示第二个图并且运行pow()和Dian()
			dian.addEventListener("touchstart", function() {
				pow();
				dianji.style.display = "block"
				dian.style.display = "none";
				Dian();
			})
			//点击第二次，隐藏所有提示
			dianji.addEventListener("touchstart", function() {
				dianji.style.display = "none";
			})
			//点击再玩一次，隐藏结果框
			agi.addEventListener("touchstart", function() {
				location.reload();
			})
			chou.addEventListener("touchstart",function(){
				self.location='index.html';
			})
			//点击×取消规则
			cha.addEventListener("touchstart",function(){
				ze.style.display="none";
			})
			
		</script>
	</body>

</html>